<template>
  <view class="home" :data-rate="rate" @click="onClick" :style="computedStyle">
    <view
      class="waveball"
      :class="{
        warning: rate > 60,
        danger: rate > 80,
        border,
      }"
      :style="computedStyle"
    >
      <view class="wave">
        <slot></slot>
      </view>
      <view class="wave-mask" :style="computeMaskStyle"></view>
      <view class="wave-mask2" :style="computeMaskStyle"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    rate: {
      type: Number,
      default: 0,
    },
    border: {
      default: true,
    },
    width: {
      type: Number,
      default: 128,
    },
  },
  computed: {
    computeMaskStyle() {
      let w = this.width * 2.5;
      return `top: ${-this.rate}rpx;width: ${w}rpx; height: ${w}rpx;`;
    },
    computedStyle() {
      let w = this.width;
      return `width: ${w}rpx; height: ${w}rpx`;
    },
  },
  data() {
    return {};
  },
  methods: {
    onClick() {
      this.$emit("click");
      this.$emit("clickwave");
    },
  },
};
</script>

<style lang="stylus" scoped>
.waveball {
  position: relative;
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  overflow: hidden;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);

  &.border {
    border: 10rpx solid RGBA(65, 207, 107, 0.4);
  }

  .wave {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-180deg, #41CF6B 0%, #2AC758 100%);
    border: none;
    border-radius: 50%;
    // margin-left: 6rpx;
    margin: 0 auto;
    // margin-top: 6rpx;
    overflow: hidden;
    box-sizing: border-box;
  }

  .wave-mask, .wave-mask2 {
    position: absolute;
    width: 266rpx;
    height: 266rpx;
    top: 0;
    left: 50%;
    border-radius: 40%;
    background-color: rgba(255, 255, 255, 0.2);
    // background-color: rgba(53, 179, 90, 0.6);
    transform: translate(-50%, -70%) rotate(0);
    animation: toRotate 7s linear -5s infinite;
    z-index: 20;
    box-sizing: border-box;
    transition: top 0.8s ease-in;
  }

  .wave-mask2 {
    // display: none;
    background-color: rgba(255, 255, 255, 0.08);
    // background-color: rgba(53, 179, 90, 0.8);
    animation: toRotate 7s linear -5.4s infinite;
  }

  &.warning {
    // border: 6rpx solid #e6a23c;
    .wave {
      // background-image: linear-gradient(-180deg, #f0c78a 13%, #e6a23c 91%);
    }

    &.danger {
      .wave {
        background-image: linear-gradient(-180deg, #41CF6B 13%, #66DA92 91%);
      }
    }
  }
}

@keyframes toRotate {
  50% {
    transform: translate(-50%, -70%) rotate(-180deg);
  }

  100% {
    transform: translate(-50%, -70%) rotate(-360deg);
  }
}
</style>